<!doctype html>
<style>* {
  padding: 0;
  margin: 0
}</style>
<div style="overflow:hidden;height:125px;position:relative">
  <!--[if lt IE 9]>.sprite{background-image: url(sprite.png)!important}<![endif]-->
  <style>
    /* HELPERS */
    .animated {
      -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -webkit-transition-property: width, height, left, right, opacity;
      -moz-transition-property: width, height, left, right, opacity;
      -ms-transition-property: width, height, left, right, opacity;
      -o-transition-property: width, height, left, right, opacity;
      transition-property: width, height, left, right, opacity;
    }

    .gradient1 {
      background: #66676a;
      background: -moz-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66676a), color-stop(100%, #1a1a1a));
      background: -webkit-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background: -o-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background: -ms-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background: linear-gradient(to bottom, #66676a 0%, #1a1a1a 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#66676a", endColorstr="#1a1a1a", GradientType=0);
    }

    .gradient2 {
      background: #1a1a1a;
      background: -moz-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a1a1a), color-stop(100%, #66676a));
      background: -webkit-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background: -o-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background: -ms-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background: linear-gradient(to right, #1a1a1a 0%, #66676a 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a1a1a", endColorstr="#66676a", GradientType=1);
    }

    .translateA {
      -webkit-transform: translate3D(-50%, 0, 1px);
      -moz-transform: translate3D(-50%, 0, 1px);
      -ms-transform: translate3D(-50%, 0, 1px);
      -o-transform: translate3D(-50%, 0, 1px);
      transform: translate3D(-50%, 0, 1px);
    }

    .sprite {
      background: transparent url('') no-repeat scroll 0 0;
    }

    /* ELEMENTS */
    .wrapper_sl {
      position: absolute;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 100px;
      background: black;
      -webkit-box-shadow: 0 -1px 5px 0 #222222;
      box-shadow: 0 -1px 5px 0 #222222;
      cursor: pointer
    }

    .persistent_sl {
      float: left;
      width: 100px;
      position: relative;
      height: 100px;
      z-index: 4
    }

    .logo_sl {
      background-position: -180px -177px;
      height: 79px;
      width: 79px;
      margin: 10px
    }

    .ad_slides {
      display: inline-block;
      position: relative;
      width: 90%;
      width: calc(100% - 100px);
      height: 100%
    }

    .ad_slide {
      position: absolute;
      height: 125px;
      min-width: 25%;
      bottom: 0px;
      overflow: hidden;
      z-index: 2
    }

    .ad_slide .slide_inner_sl {
      height: 100px;
      width: 100%;
      position: absolute;
      bottom: 0px
    }

    .ad_slide .girl_sl {
      position: absolute;
      left: 50%;
      bottom: 0px
    }

    .ad_slide .cta_sl {
      position: absolute;
      width: 70px;
      height: 28px;
      bottom: 10px;
      left: 50%;
      opacity: 0;
      background-position: -180px 0;
    }

    .ad_slide:hover .cta_sl {
      background-position: -180px -28px
    }

    .ad_slide .tagline_sl {
      position: absolute;
      left: 50%;
      opacity: 0
    }

    /* SLIDES */
    #ad_slide_1 .girl_sl {
      background-position: -10px -10px;
      height: 124px;
      width: 117px
    }

    #ad_slide_1 .tagline_sl {
      width: 78px;
      height: 15px;
      top: 15px;
      background-position: -180px -65px
    }

    #ad_slide_2 .girl_sl {
      background-position: -10px -154px;
      height: 124px;
      width: 124px
    }

    #ad_slide_2 .tagline_sl {
      width: 82px;
      height: 37px;
      top: 15px;
      background-position: -180px -90px
    }

    #ad_slide_3 .girl_sl {
      background-position: -10px -295.5px;
      height: 129px;
      width: 160px
    }

    #ad_slide_3 .tagline_sl {
      width: 79px;
      height: 33px;
      top: 15px;
      background-position: -180px -138px
    }

    /* SLIDE 1 ACTIVE*/
    #_ad_slide_1 #ad_slide_1 {
      left: 0;
      right: 50%;
      z-index: 3
    }

    #_ad_slide_1 #ad_slide_2 {
      left: 50%;
      right: 25%
    }

    #_ad_slide_1 #ad_slide_3 {
      left: 75%;
      right: 0
    }

    /* SLIDE 2 ACTIVE*/
    #_ad_slide_2 #ad_slide_1 {
      left: 0;
      right: 75%
    }

    #_ad_slide_2 #ad_slide_2 {
      left: 25%;
      right: 25%;
      z-index: 3
    }

    #_ad_slide_2 #ad_slide_3 {
      left: 75%;
      right: 0
    }

    /* SLIDE 3 ACTIVE*/
    #_ad_slide_3 #ad_slide_1 {
      left: 0;
      right: 75%
    }

    #_ad_slide_3 #ad_slide_2 {
      left: 25%;
      right: 50%
    }

    #_ad_slide_3 #ad_slide_3 {
      left: 50%;
      right: 0;
      z-index: 3
    }

    #_ad_slide_1 #ad_slide_1 .slide_inner_sl,
    #_ad_slide_2 #ad_slide_2 .slide_inner_sl,
    #_ad_slide_3 #ad_slide_3 .slide_inner_sl {
      height: 110px;
      box-shadow: 0px 0px 5px #000
    }

    #_ad_slide_1 #ad_slide_1 .cta_sl, #_ad_slide_1 #ad_slide_1 .tagline_sl,
    #_ad_slide_2 #ad_slide_2 .cta_sl, #_ad_slide_2 #ad_slide_2 .tagline_sl,
    #_ad_slide_3 #ad_slide_3 .cta_sl, #_ad_slide_3 #ad_slide_3 .tagline_sl {
      opacity: 1
    }

    #_ad_slide_1 #ad_slide_1 .translateA,
    #_ad_slide_2 #ad_slide_2 .translateA,
    #_ad_slide_3 #ad_slide_3 .translateA {
      -webkit-transform: translate3D(-100%, 0, 1px);
      -moz-transform: translate3D(-100%, 0, 1px);
      -ms-transform: translate3D(-100%, 0, 1px);
      -o-transform: translate3D(-100%, 0, 1px);
      transform: translate3D(-100%, 0, 1px);
    }
  </style>
  <a href="http://www.lorealparis.com.cn/" target="_ct_ad">
    <div class="wrapper_sl">
      <div class="persistent_sl gradient1">
        <div class="sprite logo_sl"></div>
      </div>
      <div class="ad_slides" id="_ad_slide_1">
        <div class="ad_slide animated" id="ad_slide_1" onmouseenter="this.parentNode.id='_'+this.id">
          <div class="slide_inner_sl gradient2 animated">
            <div class="sprite girl_sl animated translateA"></div>
            <div class="sprite tagline_sl animated"></div>
            <div class="sprite cta_sl animated"></div>
          </div>
        </div>
        <div class="ad_slide animated" id="ad_slide_2" onmouseenter="this.parentNode.id='_'+this.id">
          <div class="slide_inner_sl gradient2 animated">
            <div class="sprite girl_sl animated translateA"></div>
            <div class="sprite tagline_sl animated"></div>
            <div class="sprite cta_sl animated"></div>
          </div>
        </div>
        <div class="ad_slide animated" id="ad_slide_3" onmouseenter="this.parentNode.id='_'+this.id">
          <div class="slide_inner_sl gradient2 animated">
            <div class="sprite girl_sl animated translateA"></div>
            <div class="sprite tagline_sl animated"></div>
            <div class="sprite cta_sl animated"></div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>
